import React, { useEffect, useState} from 'react';
import store from '../redux/store';
import {useNavigate} from 'react-router-dom';
import getCinemaListAction from '../redux/ActionCreator/getCinemaListAction';
function Cinemas(){
    const navigate = useNavigate()
    const [cityName,setcityName] =useState(store.getState().CityReducer.cityName)
    const [cinemaList,setCinemaList] =useState(store.getState().CinemaListReducer.list)
    useEffect(()=>{
        if(store.getState().CinemaListReducer.list.length==0){
            //说明数据为空,就请求后台数据
            // actionCreator里写异步
            store.dispatch(getCinemaListAction())
        }else{
            //拿缓存的数据
            console.log("拿数据")
        }
        //订阅
        let fh=store.subscribe(()=>{
            console.log("cinemas订阅拿到的数据:",store.getState().CinemaListReducer.list)
            setCinemaList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
            //取消订阅
            fh();
        }
    },[])
    return (
        <div>
            <div style={{overflow:"hidden"}}>
            <div  onClick={()=>{
                navigate('/city')
            }}>{cityName}</div>
            </div>
            <div style={{float:"right"}} onClick={()=>{
                navigate('/Cinemas/search')
            }}>搜索</div>
            <ol>
                {
                    cinemaList.map(item=>{
                      return <li key={item.cinemaId}>{item.cinemaId}----{item.name}</li>
                    })
                }
            </ol>
        </div>
    );
}

export default Cinemas